<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折叠导航栏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap-4.5.0/dist/css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap-4.5.0/dist/js/popper.min.js"></script>
    <script src="bootstrap-4.5.0/dist/js/bootstrap.min.js"></script>
    <style>
        .navbar-brand{margin-left:50px;border: 1px solid #fff;width: 100px;height: 40px;text-align: center;}
        ul{margin-left:50px;}
        ul li a{margin-right: 40px;color: #fff !important;}
        .navbar-toggler-icon{color:#fff !important;}
        .navbar-dark .navbar-toggler{border-color: white !important;}
    </style>
</head>
<body style="background:bisque">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <a class="navbar-brand" href="#" >logo</a>
    <!-- 按钮边框 -->
    <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <!-- 方框里面三条线 -->
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">新闻</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">体育</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">视频</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">教育</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">旅游</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">科技</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">微博</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">娱乐</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">博客</a>
            </li>
        </ul>
    </div>
</nav>
</body>
</html>